<template>
    <ChartWrapper :option="option" />
</template>
<script setup>      
    import { watch, reactive, ref, onMounted } from 'vue';
    import ChartWrapper from '@/components/ChartWrapper.vue';
    import { getInspectionSum } from '@/api/board.js';
    const chartData = ref([]);
    const props = defineProps({
        fontSize:{ type:Number }
    });
    const option = ref({});
    function setOption(){
        option.value = {
            tooltip:{
                show:true,
                trigger:'axis'
            },
            xAxis: {
              type: 'category',
              data: chartData.value.map(i=>i.workDay),
              axisLabel:{
                 color:'#9595A5',
                 fontSize:props.fontSize,
                 formatter:val=>{
                    let temp = val.split('-');
                    return temp[2] || val;
                }
              },
              axisTick:{ show:false }
            },
            yAxis: {
                type: 'value',
                name:'件',
                nameGap:props.fontSize,
                nameTextStyle:{
                    color:'#9595A5',
                    fontSize:props.fontSize
                },
                axisLine:{ show:false },
                axisLabel:{ fontSize:props.fontSize },
                splitLine:{
                    lineStyle:{
                        color:'rgba(255, 255, 255, 0.07)'
                    }
                }
                // splitLine:
            //   formatter:(val)=>{
            //     return { ... }
            //   }
            },
            series: [
                {
                    data:chartData.value.map(i=>i.inspectionTotalCount),
                    name:'巡检总数',
                    stack:'sum',
                    itemStyle:{
                        color:{
                            type:'linear',
                            x:0,
                            y:0,
                            x2:0,
                            y2:1,
                            colorStops: [{
                                offset: 0, color: 'rgba(59,97, 254, 1)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(59,97, 254, 0.6)' // 100% 处的颜色
                            }],
                        }
                    },
                    type: 'bar',
                    barWidth:props.fontSize * 0.8,
                },
                {
                    data:chartData.value.map(i=>i.rectifyCount),
                    name:'缺陷数',
                    stack:'sum',
                    itemStyle:{
                        color:{
                            type:'linear',
                            x:0,
                            y:0,
                            x2:0,
                            y2:1,
                            colorStops: [{
                                offset: 0, color: 'rgba(252, 89, 71, 1)' // 0% 处的颜色
                            }, {
                                offset: 1, color: 'rgba(252, 89, 71, 0.6)' // 100% 处的颜色
                            }],
                        }
                    },
                    type: 'bar',
                    barWidth:props.fontSize * 0.8,
                },
            ]
        }
    }
    watch(()=>props.fontSize, ()=>{
        setOption();
    })
    onMounted(()=>{
        getInspectionSum()
        .then(res=>{
            if ( res.data.code === 200 ) {
                chartData.value = res.data.data || [];
                setOption();
            }
        })
    })
</script>